<template>
	<view class="sticky" :style="{ top: '0rpx', zIndex: 99, background: '#fff' }">
		<view
			class="search flex align-items_center"
			:style="{ paddingTop: mgTop, 'line-height': lineHeight, height: upperHeight }">
			<image
				@click="back"
				class="search-back"
				src="https://aph.junhecms.com/image/homePage/0.png" />
			<view class="search-u">
				<u-search placeholder="搜索" actionText="" v-model="keyword"></u-search>
			</view>
		</view>
		<u-gap height="30rpx"></u-gap>

		<view class="selects flex wrap">
			<view :class="{ active: selectActive === -1 }" @click="handleSelectActive(-1)">
				最新上架
			</view>
			<view
				v-for="(item, index) in selects.slice(0, showMore ? selects.length : 8)"
				:key="index"
				:class="{ active: selectActive === index }"
				@click="handleSelectActive(index)">
				{{ item.name }}
			</view>
		</view>
		<image
			v-if="selects.length > 8"
			class="arrowDown"
			src="https://aph.junhecms.com/image/homePage/24.png"
			:style="{ transform: `rotate(${showMore ? 180 : 0}deg)` }"
			@click="showMore = !showMore" />
		<u-gap height="20rpx"></u-gap>
	</view>

	<view class="dotData" v-if="lmList.length <= 0">数据为空</view>
	<view class="selectCont flex" v-for="item in lmList" :key="item.id">
		<view class="selectCont-image relative shrink0">
			<image mode="aspectFill" class="inherit" :src="baseUrl + item.image" />
			<view>{{ item.lmcat }}</view>
		</view>
		<view class="selectCont-main">
			<view class="selectCont-main-head flex space-between align-items_center">
				<view>{{ item.procat }}</view>
				<view @click="viewMore(item.id)">查看更多</view>
			</view>
			<view class="selectCont-main-title">{{ item.title }}</view>
			<view class="selectCont-main-ds">{{ item.title_fu }}</view>
		</view>
	</view>
	<footerTips></footerTips>
	<share :isCustom="true" />
	<tabbar />
</template>

<script setup>
import { ref, reactive } from 'vue';
import { getUpperHeight, navigateTo } from '@/utils/tool';
import { post } from '@/utils/collect';
import { baseUrl } from '@/utils/tool.js';
import { onReachBottom } from '@dcloudio/uni-app';
import footerTips from '@/components/footerTips/footerTips.vue';
uni.setStorageSync('navTitle', '联盟生态');

const mgTop = getUpperHeight().mgTop + 'px';
const lineHeight = getUpperHeight().linHeight + 'px';
const upperHeight = getUpperHeight().linHeight + 'px';

const showMore = ref(false);

onReachBottom(() => {
	if (lmList.value.length >= lmTotal.value) return;
	lmParams.page++;
	_lm();
});

// 切换类型
const handleSelectActive = (index) => {
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 0
	});

	selectActive.value = index;
	lmParams.page = 1;
	if (index === -1) lmParams.id = undefined;
	else lmParams.id = selects.value[index].id;
	_lm();
};

const lmParams = reactive({
	id: undefined,
	page: 1,
	limit: 10
});

// 列表
const lmList = ref([]);
const lmTotal = ref(0);
const _lm = () => {
	post('/index/lm', lmParams).then((res) => {
		if (lmParams.page === 1) lmList.value = res.data.data;
		else lmList.value = lmList.value.concat(res.data.data);
		lmTotal.value = res.data.total;
	});
};
_lm();

// 分类
const _lmcat = () => {
	post('/index/lmcat').then((res) => {
		selects.value = res.data;
	});
};
_lmcat();

const back = () => uni.navigateBack();

const selects = ref([]);
const selectActive = ref(-1);
const keyword = ref('');

const viewMore = (id) => {
	uni.navigateTo({
		url: `/homePage/ecology/info?id=${id}`
	});
};
</script>

<style scoped lang="scss">
.search {
	&-u {
		width: 420rpx + 45rpx + 33rpx;
		margin-left: 16rpx;
	}

	&-back {
		width: 44rpx;
		height: 44rpx;
		margin-left: 30rpx;
	}
}
</style>
